<template>
  <div class="level-container main-content">
    <TableHeader
      :page="pageRef"
      :size="10"
      :total="totalRef"
      :changeCurrentPage="
        changeCurrentPage
      "
      :openAddDialog="()=>setDialogStatus(true)"
      interfaceType="level"
      interfaceName="deleteLevel_API"
    />

    <!-- 新增职级 -->
    <BaseDialog 
      title="新增职级"
      :dialogStatus="dialogStatusRef"
      :setDialogStatus="setDialogStatus"
      width="800px"
    >
    <CreateLevel :setDialogStatus="setDialogStatus"/>
    </BaseDialog>

    <!-- 左侧搜索 -->
    <SearchContainer>
      <template #filter>
        <FilterForm />
      </template>
    </SearchContainer>

    <!-- 右侧表格 -->
    <LevelList :levelList="levelListRef" v-if="!isLoadingRef" class="table-list" />
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import appStore from "@/store";
import { ref } from "@vue/reactivity";
import { onMounted } from "vue";
import useCommon from '@/hooks/useCommon';
import TableHeader from '@/components/the-table-header/index.vue';
import SearchContainer from '@/components/search-container/index.vue';
import LevelList from './components/LevelTable.vue';
import FilterForm from './components/FilterForm/index.vue';
import CreateLevel from './components/CreateLevel/index.vue';

onMounted(async () => {
  try {
    await initLevelList();
    console.log(isLoadingRef)
  } catch (error) {
    console.log(error,'level-error');
  }
});

const dialogStatusRef = ref(false);
const setDialogStatus = (bool:boolean) => {
  dialogStatusRef.value = bool;
}

const { levelListRef, totalRef, levelDetail, isLoadingRef } = storeToRefs(appStore.useLevelStore);
const { pageRef, setPage } = useCommon();



async function initLevelList(page = 1, size = 10, queryData = {}) {
  try {
    await appStore.useLevelStore.initLevelList(page, size, queryData);
  } catch (error) {
    console.log(error, "initLevelList-error");
  }
}

async function changeCurrentPage (newPage, pageSize = 10) {
  console.log(newPage, pageSize, 'p')
  setPage(newPage);
  await initLevelList(newPage, pageSize);
}
</script>

<style lang="less" scoped>
.level-container {
  height: 100vh;
  display: flex;
  .table-list {
    width: 100%;
  }
}
</style>
